<template>
  <ele-page flex-table>
    <ComHeader :title="`调拨异常单详情[${info?.order_sn}]`" @back="goBack" />
    <ele-bottom-bar :teleported="true">
      <template #extra>
        <el-button v-if="info.is_edit" type="primary" plain @click="onCommand('EDIT')">编辑</el-button>
        <el-button v-if="info.is_ok" type="success" plain @click="onCommand('YC')">结单</el-button>
      </template>
    </ele-bottom-bar>

    <ele-card flex-table bordered :header-style="{ padding: '0 16px' }">
      <el-scrollbar>
        <div v-show="active === '1'">
          <el-descriptions title="" :column="4">
            <el-descriptions-item :width="100" label="调拨异常单">
              <ele-copyable>{{ info.order_sn }}</ele-copyable>
            </el-descriptions-item>
            <el-descriptions-item :width="100" label="调拨单">
              <ele-copyable>{{ info.ot_sn }}</ele-copyable>
            </el-descriptions-item>
            <el-descriptions-item :width="100" label="出库单">
              <ele-copyable>{{ info.out_sn }}</ele-copyable>
            </el-descriptions-item>
            <el-descriptions-item :width="100" label="入库单">
              <ele-copyable>{{ info.enter_sn }}</ele-copyable>
            </el-descriptions-item>
            <el-descriptions-item :width="100" label="订单状态">
              <el-tag :type="getType(info.status)">{{ info.status_name || '-' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :width="100" label="货主">
              {{ info.supplier_name || '-' }}
            </el-descriptions-item>
            <el-descriptions-item :width="100" label="发货仓库">
              {{ info.out_warehouse_name || '-' }}
            </el-descriptions-item>
            <el-descriptions-item :width="100" label="收货仓库">
              {{ info.enter_warehouse_name || '-' }}
            </el-descriptions-item>
            <el-descriptions-item :width="100" label="发货数量">
              {{ info.out_num || '-' }}
            </el-descriptions-item>
            <el-descriptions-item :width="100" label="最新发货数量">
              {{ info.new_out_num || '-' }}
            </el-descriptions-item>
            <el-descriptions-item v-if="info.out_status_name" :width="100" label="发货状态">
              <el-tag :type="getType(info.out_status)">{{ info.out_status_name }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :width="100" label="收货数量">
              {{ info.enter_num || '-' }}
            </el-descriptions-item>
            <el-descriptions-item :width="100" label="最新收货数量">
              {{ info.new_enter_num || '-' }}
            </el-descriptions-item>
            <el-descriptions-item v-if="info.enter_status_name" :width="100" label="收货状态">
              <el-tag :type="getType(info.enter_status)">{{ info.enter_status_name }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :width="100" label="异常数量">
              {{ info.diff_num || '-' }}
            </el-descriptions-item>
            <el-descriptions-item :width="100" label="最新异常数量">
              {{ info.new_diff_num || '-' }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="备注">
              {{ info.remark || '-' }}
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions title="" :column="4">
            <el-descriptions-item :span="4" label="附件">
              <div class="flex-inline">
                <FileUpload
                  v-if="info.enclosure?.length"
                  :model-value="JSON.stringify(info.enclosure.map(v => ({ url: v.filepath, name: v.filename })))"
                  readonly
                />
              </div>
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions class="mt-20px" title="" :column="1">
            <template #title>
              <div>商品信息</div>
            </template>
          </el-descriptions>
          <el-table
            :data="info.product"
            size=""
            border
            style="width: 100%"
            show-summary
            :summary-method="getSummaries"
          >
            <el-table-column type="index" label="序" width="60" align="center" />
            <el-table-column prop="product_name" label="商品名称" align="left" />
            <el-table-column prop="product_code" label="商品编码" align="center" />
            <el-table-column prop="unit" label="主单位" align="center" />
            <el-table-column
              prop="diff_num"
              label="异常数量"
              align="center"
            />
          </el-table>
        </div>
        <div v-lazy-show="active === '2'">
          <PageOperation :orderId="orderId" />
        </div>
      </el-scrollbar>
    </ele-card>
    <PageReview v-model="showReview" remarkDisabled @done="review" />
  </ele-page>
</template>

<script setup>
import PageReview from '@/components/Common/Review.vue'
import FileUpload from '@/components/FileUpload/index.vue'

import PageOperation from './components/operation.vue'

defineOptions({
  name: 'TransferDiffInfo',
})

const showReview = ref(false)

const orderId = ref(0)
const route = useRoute()
const router = useRouter()
const { routeTabKey, removePageTab, setPageTabTitle } = utils.usePageTab()
const { getType } = utils

const info = ref({})
const active = ref('1')

onMounted(() => {
  orderId.value = Number(route.params?.id)

  getInfo()
})

function goBack() {
  removePageTab({ key: routeTabKey })
  router.push('/transfer/diff')
}

function updateStatus(formData, cb) {
  const loading = utils.message('请求中..', 'loading')
  utils.post('/transfer/diffReview', formData).then((res) => {
    utils.message(res.msg, res.success)
    if (res.success) {
      getInfo()
      showReview.value = false
    }
  }).finally(() => {
    cb && cb()
    loading.close()
  })
}

function review(data, cb) {
  updateStatus({
    status: data.status,
    id: [info.value.id],
  }, cb)
}

function onCommand(command) {
  if (command === 'EDIT') {
    const path = `/transfer/diff/edit/${info.value.id}`
    router.push(path)
  }
  else if (command === 'YC') {
    const opts = {
      type: 'warning',
      dangerouslyUseHTMLString: true,
    }
    utils.confirm(`确定要<span class="px-2px text-danger font-semibold">结单</span>订单吗`, '系统提示', opts).then(() => {
      const formData = {
        id: [info.value.id],
        status: command,
      }
      updateStatus(formData)
    })
  }
}

function getInfo() {
  utils.get('/transfer/diffInfo', { id: orderId.value }).then((res) => {
    info.value = res.data
    setPageTabTitle(`调拨异常单[${utils.ellipsisStr(res.data.order_sn, 0, 10)}]`)
  })
}

function getSummaries({ columns, data }) {
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    const keys = ['num']
    if (keys.includes(column.property)) {
      sums[index] = data.reduce((acc, cur) => utils.Big(acc).plus(cur[column.property]).valueOf(), 0)
    }
    else {
      sums[index] = ''
    }
  })

  return sums
}
</script>

<style lang="scss" scoped></style>
